<template>
   <div
     v-loading="loading2"
     element-loading-text="稍等提交中..."
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
     ><!-- 试题编辑界面 -->


     <el-form :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline">
       <el-form-item label="试题类型:" prop="shitileixing">
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%">
           <el-select @change="shitileixingchange" v-model="formInline.shitileixing" placeholder="请选择">
             <el-option
               v-for="item in shititype"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
         </div>
       </el-form-item>
       <el-form-item label="试题难度:" prop="nanduid">
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%">

           <el-rate style="margin-top: 10px" v-model="formInline.nanduid" show-text :texts="texts">
           </el-rate>

         </div>
       </el-form-item>
       <el-form-item label="所属题库:" prop="tikuid">
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%">
           <el-select v-model="formInline.tikuid" filterable placeholder="请选择">
             <el-option
               v-for="item in tikus"
               :key="item.value"
               :label="item.tikuname"
               :value="item.id">
             </el-option>
           </el-select>
         </div>
       </el-form-item>

       <el-form-item label="试题来源:" prop="laiyuan">
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%">
           <el-input style="width: 50%" v-model="formInline.laiyuan" placeholder="试题来源"></el-input>
         </div>
       </el-form-item>
       <el-form-item label="试题状态:" prop="shitizhuangtai">
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%">
           <el-select v-model="formInline.shitizhuangtai" filterable placeholder="请选择试题状态">
             <el-option
               v-for="item in shitistatus"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
         </div>
       </el-form-item>

       <el-form-item label="试题题干:" prop="tigan" style="margin-left:10px">
             <div style="float: left;width:20px;height:50px"></div>
             <div style="float: left;width:80%">
                 <script id="bianjiqi1"  type="text/plain"></script>
             </div>
       </el-form-item>

       <el-form-item label="选项设置:" v-if="show1" prop="xuanxiangshezhi"><!-- 单选框 -->
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%">
           <el-button @click="danxuancreate" type="primary" plain style="margin-bottom: 20px">点击增加一个选项</el-button>
           <br>
           <el-radio-group v-model="danxuancheck">
               <el-row v-for="(item,index) in danxuanlist" :key="index" :style="{'margin-bottom':5+'px'}">
                 <el-radio :label="item" :style="{'margin-right':10+'px'}">{{item}}</el-radio>
                 <el-input style="width:500px" type="textarea" v-model="danxianmiaoshu[index]" placeholder="请描述选项" ></el-input>
                 <el-tooltip class="item" effect="dark" content="单击删除这一行" placement="right">
                 <el-button type="danger" icon="el-icon-delete" circle @click="deldanxuanindex(index)" :style="{'margin-left':10+'px'}"></el-button>
                 </el-tooltip>
               </el-row>
           </el-radio-group>
         </div>
       </el-form-item>

       <el-form-item label="选项设置:" v-if="show2"><!-- 复选框 -->
           <div style="float: left;width:20px;height:50px"></div>
           <div style="float: left;width:80%">
             <el-button @click="createone" type="primary" plain style="margin-bottom: 20px">点击增加一个选项</el-button>

             <el-checkbox-group  v-model="checkList">
               <el-row v-for="(item,index) in kuanglist" :key="index" :style="{'margin-bottom':5+'px'}">
                 <el-checkbox :label="kuanglist[index]" :style="{'margin-right':10+'px'}"></el-checkbox>
                 <el-input style="width: 50%" type="textarea"  v-model="inputValues[index]" placeholder="请输入内容"></el-input>
                 <el-tooltip class="item" effect="dark" content="单击删除这一行" placement="right">
                 <el-button type="danger" icon="el-icon-delete" circle @click="delindex(index)" :style="{'margin-left':10+'px'}"></el-button>
                 </el-tooltip>
               </el-row>
             </el-checkbox-group>
           </div>
       </el-form-item>

       <el-form-item label="选项设置:" v-if="show3"><!-- 判断题 -->
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%">
           <el-row style="margin-bottom: 10px">
             <el-radio v-model="panduancheck" label="1" border>对</el-radio>
           </el-row>
           <el-row>
             <el-radio v-model="panduancheck" label="0" border>错</el-radio>
           </el-row>
         </div>
       </el-form-item>


       <el-form-item label="答案设置:" v-if="show5" prop="wenda"><!-- 判断题 -->
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%">
           <el-input style="width: 80%;" type="textarea" v-model="formInline.wendadaan" placeholder="请输入问答答案内容"></el-input>
         </div>
       </el-form-item>


       <el-form-item label="试题解析:" prop="shitijiexi" style="margin-left:10px">
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%">
           <script id="bianjiqi2" type="text/plain"></script>
         </div>
       </el-form-item>
       <br>
       <el-form-item>
         <div style="float: left;width:20px;height:50px"></div>
         <div style="float: left;width:80%;padding-left:6%">
           <el-button type="primary" @click="onSubmit">保存</el-button>
           <el-button>取消</el-button>
         </div>
       </el-form-item>

     </el-form>


   </div>
</template>

<script>

    export default {
        components:{

        },
        name: "editorshiti",
        data(){
           return{
              show1:true,
              show2:false,
              show3:false,
              show4:false,
              show5:false,
              loading2:false,
              wenda:"",
              danxuancheck:"A",//单选选中的答案
              panduancheck:"1",//判断题选中的答案  对
              panduanxiang:["对","错"],
              wenda:"",//问答题的答案
              danxuanlist:["A","B","C","D"],//单选初始化选项
              danxianmiaoshu:["","","",""],//单选的初始化选项描述
              checkList:["A"],//复选选中的答案
              xuanxiang:this.domain.xuanxiang,
              kuanglist:["A","B","C","D"],//复选框初始化的选项
              inputValues:["","","",""],//复选选项的描述
              texts:this.domain.texts,
              shitistatus:this.domain.shitistatus,
              shititype:this.domain.shititype,
              tikus:[],
              formInline:{
                 wendadaan:'',//当试题类型是问答题时候起作用
                 shitileixing:'',
                 nanduid:1,
                 tikuid:'',
                 laiyuan:'',
                 shitizhuangtai:'',
                 tigan:'',
              },
              bianjiqi1:null,
              bianjiqi2:null,
              inputValues:["","","",""],
              rules:{
                shitileixing:[{ required: true, message: '请选择试题类型', trigger: 'change' }],
                nanduid:[{ required: true, message: '请选择试题难度', trigger: 'click' }],
                tikuid:[{ required: true, message: '请选择试题难度', trigger: 'change' }],
                shitizhuangtai:[{ required: true, message: '请选择试题状态', trigger: 'change' }],
                laiyuan:[{ required: true, message: '请填写试题来源', trigger: 'blur' }],
                tigan:[{ required: false, message: '请填写题干信息',trigger: 'change' }],
                shitijiexi:[{ required: false, message: '请填写试题解析',trigger: 'click' }]
              }
           }
        },
        methods:{
          shitileixingchange(){//试题类型改变的时候触发
              let stlx=this.$data.formInline.shitileixing
              if(stlx=="1"){//单选
                  this.$data.show1=true
                  this.$data.show2=false
                  this.$data.show3=false
                  this.$data.show4=false
                  this.$data.show5=false
              }else if(stlx=="2"){//多选
                  this.$data.show1=false
                  this.$data.show2=true
                  this.$data.show3=false
                  this.$data.show4=false
                  this.$data.show5=false
              }else if(stlx=="3"){//判断
                  this.$data.show1=false
                  this.$data.show2=false
                  this.$data.show3=true
                  this.$data.show4=false
                  this.$data.show5=false
              }else if(stlx=="4"){//填空题
                  this.$data.show1=false
                  this.$data.show2=false
                  this.$data.show3=false
                  this.$data.show4=true
                  this.$data.show5=false
              }else if(stlx=="5"){//问答题
                  this.$data.show1=false
                  this.$data.show2=false
                  this.$data.show3=false
                  this.$data.show4=false
                  this.$data.show5=true
              }
          },
          onSubmit(){//提交数据
            this.$refs['formInline'].validate((valid) => {//表单必填项的验证
              if (valid) {
                //打开加载层
                this.$data.loading2=true
                //组装数据
                if(this.$data.formInline.shitileixing=="2"){//复选框
                  this.$data.formInline.checkList=JSON.stringify(this.$data.checkList)//选中项
                  this.$data.formInline.kuanglist=JSON.stringify(this.$data.kuanglist)//题目的选项（A,B。。。。）
                  this.$data.formInline.inputValues=JSON.stringify(this.$data.inputValues)//选项的描述
                }
                if(this.$data.formInline.shitileixing=="1"){//单选框
                  this.$data.formInline.danxuancheck=this.$data.danxuancheck//选中项
                  this.$data.formInline.danxuanlist=JSON.stringify(this.$data.danxuanlist)//题目的选项（A,B。。。。）
                  this.$data.formInline.danxuanmiaoshu=JSON.stringify(this.$data.danxianmiaoshu)//选项的描述
                }
                if(this.$data.formInline.shitileixing=="3"){//判断题
                  this.$data.formInline.panduancheck=this.$data.panduancheck//选中项
                  this.$data.formInline.panduanxiang=JSON.stringify(this.$data.panduanxiang)//判断的描述
                }

                alert(this.toAes.encrypt(this.bianjiqi1.getContent()));
                //从富文本编辑器获取题干数据给form表单添加题干描述  bianjiqi1
                this.$data.formInline.tigan=this.toAes.encrypt(this.bianjiqi1.getContent())
                //从富文本编辑器获取题目解析数据给form表单添加题干描述  bianjiqi2
                this.$data.formInline.timujiexi=this.toAes.encrypt(this.bianjiqi2.getContent())
                //设置用户ID
                this.$data.formInline.userid=this.domain.userinfo.userid
                //请求接口提交数据
                let qs=require("qs")

                this.$axios.post(this.domain.serverpath+'tiku/toAddShiTi',qs.stringify(this.$data.formInline)).then((response)=>{
                  //提交成功关闭加载窗口
                  this.$data.loading2=false
                })
              } else {
                console.log('error submit!!');
                //提示信息
                this.$notify({
                  title: '警告',
                  message: '有必填项没有填写，请检查带‘*’的项^_^',
                  type: 'warning'
                });
                return false;
              }
            });
          },
          deldanxuanindex(index){//单选的删除
            let  xuanzhong=this.$data.danxuanlist.splice(index,1)
            this.$data.danxianmiaoshu.splice(index,1)
            //取消选中一个start
            if(this.$data.danxuancheck==xuanzhong){

              this.$data.danxuancheck=null
              //取消一个end
            }
          },danxuancreate(){
            if(this.$data.danxuanlist.length<=25){
              let xx=this.$data.xuanxiang[0]//获取选项标识
              let index1=0;
              while(true){
                if(this.$data.danxuanlist.indexOf(xx)==-1){//说明不存在
                  xx=this.$data.xuanxiang[index1]
                  break
                }else{
                  index1++
                  xx=this.$data.xuanxiang[index1]
                }
              }
              this.$data.danxuanlist.push(xx)
              this.$data.danxianmiaoshu.push("")
            }
          },
          delindex(index){//多选题删除一个
            let faxuanzhong=this.$data.kuanglist.splice(index,1)
            this.$data.inputValues.splice(index,1)
            //取消选中一个start
            if(this.$data.checkList.length>0){
              let check=[];
              for(let i=0;i<this.$data.checkList.length;i++){
                if(this.$data.checkList[i]!=faxuanzhong){
                  check.push(this.$data.checkList[i])
                }
              }
              this.$data.checkList=check
              //取消一个end
            }
          },
          createone(){//多选题增加一个
            if(this.$data.kuanglist.length<=25){
              let xx=this.$data.xuanxiang[0]//获取选项标识
              let index1=0;
              while(true){
                if(this.$data.kuanglist.indexOf(xx)==-1){//说明不存在
                  xx=this.$data.xuanxiang[index1]
                  break
                }else{
                  index1++
                  xx=this.$data.xuanxiang[index1]
                }
              }
              this.$data.kuanglist.push(xx)
              this.$data.inputValues.push("")
            }

          },
          getTiKu(){//从Redis中获取题库信息
             this.$axios.post(this.domain.serverpath+'tiku/getTikuListFromRedis').then((response)=>{
                  this.$data.tikus=response.data.result
             })
          },
          getData(){

          },
          forInitUeditor(){
            //初始化富文本编辑器
            let conf1={initialFrameWidth:900,initialFrameHeight: 160,margin:200}
            window.UE.delEditor('bianjiqi1');//删除编辑器
            this.bianjiqi1 = window.UE.getEditor('bianjiqi1',conf1);//重新创建编辑器
            this.bianjiqi1.addListener('ready',  () => {
              this.bianjiqi1.setContent("编辑题干信息")
            })

            let conf2={initialFrameWidth:900,initialFrameHeight: 160}
            window.UE.delEditor('bianjiqi2');//删除编辑器
            this.bianjiqi2 = window.UE.getEditor('bianjiqi2',conf2);//重新创建编辑器
            this.bianjiqi2.addListener('ready',  () => {
              this.bianjiqi2.setContent("编辑试题解析")
            })

          }
        },
        mounted(){
          document.getElementById("bianjiqi1").style.padding=200;
          this.forInitUeditor();
          //加载题库数据
          this.getTiKu();
        },
        destory(){

        }
    }
</script>

<style scoped>
  .edui-default{
     padding-left: 200px;
  }
  .grid-content {
    border-radius:0px;
    min-height:32px;
    padding-top:10px;
    text-align: center;
  }

  .grid-content1 {
    border-radius:0px;
    min-height:30px;
    padding-top:10px;
    text-align: center;
    border:#dddddd 1px solid;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .bg-purple {
    background: #d3dce6;
  }
</style>
